import React, { useState, useEffect } from 'react';
import styles from './index.less';
import moment from 'moment';
import { history } from 'umi';
import { Dropdown } from 'antd';
import type { MenuProps } from 'antd';

export default function Header(props: any) {
  const { info } = props;
  const [dateTime, setDateTime] = useState<string>('');
  const items: MenuProps['items'] = [
    {
      key: '1',
      label: (
        <span
          onClick={() => {
            window.localStorage.setItem('userInfo', '');
            history.push('/login');
          }}
        >
          退出登录
        </span>
      ),
    },
  ];
  const getDateWeek = () => {
    let d = moment().format('YYYY-MM-DD HH:mm:ss');
    let week = moment().day();
    let z: string = '';
    switch (week) {
      case 1:
        z = '周一';
        break;
      case 2:
        z = '周二';
        break;
      case 3:
        z = '周三';
        break;
      case 4:
        z = '周四';
        break;
      case 5:
        z = '周五';
        break;
      case 6:
        z = '周六';
        break;
      case 0:
        z = '周日';
        break;
    }
    return `${d} ${z}`;
  };
  useEffect(() => {
    let timer: any = null;
    setDateTime(getDateWeek());
    timer = setInterval(() => {
      setDateTime(getDateWeek());
    }, 1000);
    return () => {
      clearInterval(timer);
      timer = null;
    };
  }, []);
  return (
    <div className={styles.titleC}>
      <div className={styles.titleL}>
        <span style={{ marginLeft: 20 }}>
          [
          <img src={require('@/assets/tianqi.png')} alt="" />
          晴天 6~9℃ ]
        </span>
        <img style={{ marginLeft: 20 }} src={require('@/assets/time.png')} />
        <span>{dateTime}</span>
      </div>
      <div className={styles.titleCen}>{info.name}</div>
      <div className={styles.titleR}>
        <div>
          <img src={require('@/assets/user.png')} />
          <Dropdown menu={{ items }} placement="bottom">
            <span>欢迎您！{info.username}</span>
          </Dropdown>
        </div>
      </div>
    </div>
  );
}
